@()(implicit session: Session)
@title = @{
    session.get("lang") match {
        case Some("cn") => "表型信息"
        case _ => "Phenome"
    }
}
@config.main(title) {

    <div class="body-box">
        <div class="page-box">

            @config.subTitle(title)

            <div class="main-body">

                <table class="table table-hover" id="table" data-pagination="true" data-advanced-sortable="true"
                data-page-list="[10]">
                    <thead>
                        <tr  >
                            <th data-field="photo" data-sortable="true" data-formatter="GetPhoto" >Photo</th>
                            <th data-field="code" data-sortable="true" data-search-type="text"  data-formatter="GetSample">Sample</th>
                            <th data-field="collect" data-sortable="true" data-search-type="text">Collect Info</th>
                            <th data-field="lon" data-sortable="true" data-search-type="text">Longitude</th>
                            <th data-field="lat" data-sortable="true" data-search-type="text">Latitude</th>
                            <th data-field="altitude" data-sortable="true" data-search-type="text">Altitude</th>
                            <th data-field="trait" data-sortable="true" data-search-type="text">Trait</th>
                            <th data-field="fruit" data-sortable="true" data-search-type="text">Fruit</th>
                            <th data-field="note" data-sortable="true" data-search-type="text">Note</th>
                        </tr>
                    </thead>
                </table>

            </div>
        </div>
    </div>

    <script>

            $(function () {
                $.post("@routes.PhenotypeController.getAllPhenotypeInfo", (data) => {
                    $("#table").bootstrapTable({
                        data: data
                    })
                })
            })

            function GetPhoto(value, rows) {
                return `<a data-fancybox="group" href="/COADB/phenotype/getPhoto/${rows.img}"><img src="/COADB/phenotype/getPhoto/${rows.img}" style="width: 200px;max-height: 200px"/></a>`
            }

            function GetSample(value, rows) {
                return `<a href="/COADB/phenotype/pheInfoPage/${rows.id}" target="_blank">${value}</a>`
            }

    </script>

}